<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 投诉数据（实际应从后端获取，这里用本地模拟）
const complaints = ref([
  { id: 1, title: '古浪-河口天然气联络管道工程施工第二标段违规', content: '项目施工期间，开采原料和弃渣矿石堆放地堆积量大，扬尘、噪音、车辆、开采原料运输等对周边生态环境造成影响。', date: '2023-04-13', status: '正在处理中', result: '南校核过，等待移办', attachment: { name: '项目相关材料.pdf', url: '#' } },
  { id: 2, title: '麻城经济开发区道路东园小学建设项目违规', content: '施工噪音扰民，夜间施工未报备，影响周边居民休息。', date: '2022-04-13', status: '处理完成', result: '已整改，夜间禁止施工', attachment: { name: '整改报告.pdf', url: '#' } },
  { id: 3, title: '红安县2023年度小型水库安全监测项目违规', content: '监测设备未按要求安装，存在安全隐患。', date: '2023-03-22', status: '正在处理中', result: '', attachment: { name: '监测设备清单.docx', url: '#' } },
  { id: 4, title: '先锋创业大楼施工扬尘超标', content: '施工现场未覆盖，扬尘污染严重。', date: '2023-02-18', status: '处理完成', result: '已加盖防尘网', attachment: { name: '扬尘监测数据.xlsx', url: '#' } },
  { id: 5, title: '海头镇宅基地土地发包项目违规', content: '土地发包未公示，存在暗箱操作嫌疑。', date: '2023-01-30', status: '正在处理中', result: '', attachment: { name: '发包公示材料.pdf', url: '#' } },
  { id: 6, title: '烟台高新区人民政府海洋街道办事处采购违规', content: '采购流程不规范，部分材料缺失。', date: '2023-01-15', status: '处理完成', result: '补齐材料，流程合规', attachment: { name: '采购流程说明.pdf', url: '#' } },
  { id: 7, title: '同江实验幼儿园2023年05月政府采购违规', content: '采购物资与招标公告不符。', date: '2022-12-28', status: '正在处理中', result: '', attachment: { name: '采购对比表.docx', url: '#' } },
  { id: 8, title: '侯马市第二中学校2023年4月至11月政府采购违规', content: '部分采购项目未履行公开程序。', date: '2022-12-10', status: '处理完成', result: '已补充公示', attachment: { name: '公示补充材料.pdf', url: '#' } },
])

const showDialog = ref(false)
const form = ref({ title: '', content: '', contact: '', phone: '' })
const formError = ref('')
const handleSave = () => {
  if (!form.value.title || !form.value.content || !form.value.contact || !form.value.phone) {
    formError.value = '请填写所有必填项';
    return;
  }
  const newComplaint = {
    id: Date.now(),
    title: form.value.title,
    content: form.value.content,
    contact: form.value.contact,
    phone: form.value.phone,
    date: new Date().toISOString().slice(0, 10),
    status: '正在处理中',
    result: '',
    attachment: { name: '', url: '' }
  }
  complaints.value.unshift(newComplaint)
  localStorage.setItem('complaints', JSON.stringify(complaints.value))
  showDialog.value = false
  form.value = { title: '', content: '', contact: '', phone: '' }
  formError.value = ''
  alert('提交成功')
}
const handleCancel = () => {
  showDialog.value = false
  formError.value = ''
}
const goDetail = (id) => {
  localStorage.setItem('complaints', JSON.stringify(complaints.value))
  router.push(`/complaint/${id}`)
}
</script>

<template>
  <div class="complaint-bg">
    <div class="complaint-container">
      <div class="complaint-header-row">
        <div class="complaint-breadcrumb">首页 / <span class="black">违规投诉</span></div>
        <button class="complaint-btn" @click="showDialog = true">去投诉</button>
      </div>
      <div class="complaint-table-card">
        <table class="complaint-table">
          <thead>
            <tr>
              <th style="width:60px;">序号</th>
              <th>动态标题</th>
              <th style="width:140px;">发布时间</th>
              <th style="width:120px;">处理状态</th>
              <th style="width:80px;">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, idx) in complaints" :key="item.id">
              <td>{{ (idx+1).toString().padStart(2, '0') }}</td>
              <td class="title-cell">{{ item.title }}</td>
              <td>{{ item.date }}</td>
              <td>
                <span :class="item.status === '正在处理中' ? 'status-processing' : 'status-done'">{{ item.status }}</span>
              </td>
              <td><a class="complaint-link" @click="goDetail(item.id)">查看</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 投诉弹窗 -->
    <div v-if="showDialog" class="complaint-dialog-mask">
      <div class="complaint-dialog">
        <div class="dialog-title">创建投诉</div>
        <div class="dialog-body">
          <div class="dialog-row"><span class="required">*</span>投诉标题：<input v-model="form.title" placeholder="请输入投诉标题" /></div>
          <div class="dialog-row"><span class="required">*</span>投诉内容：<textarea v-model="form.content" placeholder="请输入投诉内容"></textarea></div>
          <div class="dialog-row"><span class="required">*</span>联系人：<input v-model="form.contact" placeholder="请输入联系人" /></div>
          <div class="dialog-row"><span class="required">*</span>联系电话：<input v-model="form.phone" placeholder="请输入联系电话" /></div>
          <div v-if="formError" class="form-error">{{ formError }}</div>
        </div>
        <div class="dialog-footer">
          <button @click="handleCancel">取消</button>
          <button class="save-btn" @click="handleSave">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.complaint-bg {
  background: #fafbfc;
  min-height: 100vh;
  padding-bottom: 40px;
}
.complaint-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.complaint-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0 0 0;
}
.complaint-breadcrumb {
  font-size: 15px;
  color: #888;
  text-align: left;
  margin: 0;
}
.complaint-breadcrumb .black {
  color: #222;
  font-weight: normal;
}
.complaint-title {
  font-size: 20px;
  font-weight: bold;
  color: #222;
}
.complaint-btn {
  background: #19c37d;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 32px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.complaint-btn:hover {
  background: #13b06a;
}
.complaint-table-card {
  background: #fff;
  border-radius: 12px;
  margin: 18px 0 0 0;
  padding: 0 0 24px 0;
  box-shadow: 0 2px 8px #e0f7fa55;
}
.complaint-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.complaint-table th, .complaint-table td {
  padding: 14px 10px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
  text-align: center;
}
.complaint-table th {
  background: #f7fafd;
  color: #666;
  font-weight: 500;
}
.complaint-table tr:last-child td {
  border-bottom: none;
}
.title-cell {
  text-align: left;
  padding-left: 10px;
  color: #222;
  font-weight: 500;
}
.complaint-link {
  color: #19c37d;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.complaint-link:hover {
  color: #13b06a;
  text-decoration: underline;
}
.status-processing {
  color: #ff9800;
  font-weight: bold;
}
.status-done {
  color: #19c37d;
  font-weight: bold;
}
.complaint-dialog-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.complaint-dialog {
  background: #fff;
  border-radius: 10px;
  width: 480px;
  padding: 24px 32px 18px 32px;
  box-shadow: 0 2px 16px #e0f7fa99;
}
.dialog-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 18px;
}
.dialog-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dialog-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.dialog-row input, .dialog-row textarea {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #e0f7fa;
  border-radius: 4px;
  font-size: 15px;
}
.dialog-row textarea {
  min-height: 60px;
  resize: vertical;
}
.required {
  color: #e53935;
  margin-right: 2px;
}
.form-error {
  color: #e53935;
  font-size: 14px;
  margin-top: 6px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 18px;
}
.save-btn {
  background: #19c37d;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 32px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.save-btn:hover {
  background: #13b06a;
}
</style> 